<template>
  <div>
    <div class="an-title">登录</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="state.username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="state.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { reactive } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import router from "@/router";
import md5 from "js-md5";
export default {
  props: {
    redirect: {
      // 登录成功后跳转地址
      type: String,
      default: "/",
    },
  },
  setup(props) {
    const state = reactive({
      username: "",
      password: "",
    });
    const onSubmit = (values) => {
      let nd = Object.assign(values);
      nd.password = md5(values.password);
      useUserStoreHook()
        .login(nd)
        .then(() => {
          router.replace({ path: props.redirect });
        })
        .finally(() => {});
    };
    return {
      state,
      onSubmit,
    };
  },
};
</script>

<style scoped>
.an-title {
  padding: 20px 0;
  color: #fff;
  text-align: center;
  border-bottom-right-radius: 400px;
  border-bottom-left-radius: 400px;
  background: linear-gradient(to bottom right, #1989fa, #044e98);
  margin-bottom: 30px;
}
.an-btn-line {
  padding: 15px;
  font-size: 14px;
  text-align: center;
}
</style>
